
<script>
import { mapGetters, mapMutations } from 'vuex';
import ApplyStyle from './ApplyStyle';
export default {
  name: 'ManagerStyle',
  components: { ApplyStyle },
  props: {
    isShowStyle: {
      type: Boolean,
      default: false,
    },
    //查询服务地址
    service: {
      type: String,
      default: '',
    },
    // 地图信息
    mapData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      selectLayer: '',
      layerCheck: [],
      layerMsg: {},
    };
  },
  computed: {
    ...mapGetters(['controls', 'currentId']),
  },
  watch: {
    isShowStyle(newVal) {
      if (newVal) {
        this.getAllLayers();
      }
    },
    selectLayer(newVal) {
      const layerData = this.layerCheck.filter(layers => layers.title === newVal);
      this.layerMsg = layerData[0];
    },
  },
  methods: {
    ...mapMutations({
      updateAppOptions: 'UPDATE_CHART_CONFIG',
    }),
    getAllLayers() {
      this.layerCheck = [];
      this.mapData.forEach(kMap => {
        const layers = this.$store.getters[`${kMap.mapId}/ogcLayers`];
        if (layers) {
          layers.forEach(layer => {
            const wfsData = this.$store.getters[`${kMap.mapId}/wfsLayerData`][layer.options.layers];
            wfsData.mapNum = kMap.num;
            this.layerCheck.push(wfsData);
          });
        }
      });
      this.selectLayer = this.layerCheck[0].title;
    },
    setLayerStyle(layerData) {
      let currentControl = this.controls[this.currentId];
      const mapNum = this.layerCheck.filter(check => check.title === this.selectLayer);
      if (mapNum[0].mapNum !== 3) {
        let getMap = [];
        mapNum.forEach(mapItem => {
          const getLayers = currentControl.options.data[`map_${mapItem.mapNum}`].filter(
            controlData => this.filterLayerName(mapItem.servicesurl) === controlData.name
          );
          getMap.push(getLayers);
        });
        getMap.forEach(item => {
          const layerName = item[0].name.split(':');
          if (layerName[1] === this.selectLayer) {
            item[0].services.forEach(service => {
              if (service.servicestype === 12) {
                service.options = {
                  styles: layerData.name,
                };
              }
            });
          }
        });
        // 设置图层样式
        this.updataMapLayers(layerData.name, mapNum[0].mapNum);
        this.updateAppOptions({ data: { [this.currentId]: currentControl } });
      } else {
        this.updataMapLayers(layerData.name, mapNum[0].mapNum);
      }
    },
    // 过滤得到图层名称
    filterLayerName(servicesurl) {
      let layers;
      const url = new URL(servicesurl);
      layers = url.searchParams.get('typeName');
      if (!layers) layers = url.searchParams.get('layers');
      return layers;
    },
    // 得到所有的地图
    getMapData(type) {
      return this.mapData.filter(item => item.num === type);
    },
    // 浏览服务
    updataMapLayers(styles, type) {
      if (this.mapData.length !== 0) {
        const mapData = this.getMapData(type);
        const setLayers = this.$store.getters[`${mapData[0].mapId}/ogcLayers`].filter(
          layers => layers.options.title === this.selectLayer
        );
        setLayers.forEach(layers => {
          layers.setParams({ styles });
        });
      }
    },
  },
};
</script>

<template>
  <div class="datav-manager-style">
    <h4>图层管理</h4>
    <RadioGroup v-model="selectLayer">
      <Radio
        v-for="(item,index) in layerCheck"
        :key="index"
        :label="item.title">{{ item.title }}</Radio>
    </RadioGroup>
    <h4>样式管理</h4>
    <ApplyStyle
      :layer-msg="layerMsg"
      @on-set-layer-style="setLayerStyle"></ApplyStyle>
  </div>
</template>

<style lang="less" scoped>
.datav-manager-style {
  .k-radio-group {
    margin: 10px 0;
    height: 30px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
